import DiaryList from "./DiaryList";
import Pager from "@/components/Pager";
import { request } from "@/utils/request";
import { PagedDataResponse, ArticleInfo } from "@/type";

type PageProps = {
  searchParams?: Promise<{ page?: string }>;
};

export default async function page({ searchParams }: PageProps) {
  const urlParams = (await searchParams) ?? {};
  const pageConfig = {
    page: Number(urlParams.page) || 1,
    pageSize: 10,
    total: 0,
  };
  const query = new URLSearchParams({
    type: "2",
    page: String(pageConfig.page),
    pageSize: String(pageConfig.pageSize),
  }).toString();
  const res = await request<PagedDataResponse<ArticleInfo>>(
    `/articles?${query}`
  );
  const diaryList = res?.data.list ?? [];
  pageConfig.total = res?.data.total ?? 0;
  return (
    <div className="w-full md:w-[600px] m-auto text-base md:text-lg">
      <div className="ml-2 md:ml-0 md:-translate-x-10">
        <div className="mt-5 mb-2 text-xl md:text-2xl">随记</div>
        <div className="mb-5 md:mb-8 text-stone-600 dark:text-stone-50">
          那一天的记录，记录起来
        </div>
      </div>

      <DiaryList diaryList={diaryList} />

      <div className="mb-5 md:mb-10 flex justify-end">
        <Pager
          pageConfig={{
            page: pageConfig.page,
            pageSize: pageConfig.pageSize,
            total: pageConfig.total,
          }}
        />
      </div>
    </div>
  );
}
